<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>

        var xhr = new XMLHttpRequest()
        xhr.open("get", "https://www.zzgoodqc.cn/index.php/index/index/getOrders")
        xhr.send()
        xhr.onload = function () {
            var arrobj = JSON.parse(xhr.response).data
            console.log(arrobj);
var myChart = echarts.init(document.getElementById('main'));
        let xLabel = ['4月', '5月', '6月', '7月', '8月', '9月'];
        let dataValue = [arrobj.list[0], arrobj.list[1], arrobj.list[2], arrobj.list[3], arrobj.list[4], arrobj.list[5]];
        let dataValue1 = [arrobj.arr[0], arrobj.arr[1], arrobj.arr[2], arrobj.arr[3], arrobj.arr[4], arrobj.arr[5]];
        let option = {
            backgroundColor: '#0c2d55',
            title: {
                text: '订单统计趋势图',
                top: '17%',
                textAlign: 'center',
                left: '49.5%',
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 18,
                    fontWeight: '600',
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: 'rgb(126,199,255)',
                    },
                },
            },
            legend: {
                show: true,
                top: '10%',
                itemWidth: 30, // 图例标记的图形宽度。
                //   itemGap: 20, // 图例每项之间的间隔。
                itemHeight: 10, //  图例标记的图形高度。
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    padding: [0, 8, 0, 8]
                }
            },
            grid: {
                top: '30%',
                left: '10%',
                right: '5%',
                bottom: '20%',
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: 'rgb(41,188,245)',
                        },
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: 12,
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#233653',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: xLabel,
                },
            ],
            yAxis: [
                {
                    name: "",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        padding: [0, 60, 0, 0]
                    },
                    // minInterval: 1,
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1160a0',
                            type: 'dashed'
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#008de7',
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    name: '总金额',
                    type: 'line',
                    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                    smooth: true,
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: '#00ffa2', // 线条颜色
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#00f0ff',//拐点颜色
                            // borderColor: '#fff600',//拐点边框颜色
                            // borderWidth: 13//拐点边框大小
                            label: {
                                show: true, //开启显示
                                color: '#fff',
                                position: 'top', //在上方显示
                                formatter: function (res) {
                                    if (res.value) {
                                        return res.value
                                    } else {
                                        return 0
                                    }
                                },
                            },
                        },

                    },
                    symbolSize: 8,   //设定实心点的大小
                    areaStyle: {
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: '#00ffa230',
                                    },
                                    {
                                        offset: 0.6,
                                        color: '#00ffa220',
                                    },
                                    {
                                        offset: 1,
                                        color: '#00ffa210',
                                    },
                                ],
                                false
                            ),
                        },
                    },
                    data: dataValue,
                },
                {
                    name: '订单数',
                    type: 'line',
                    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                    smooth: true,
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: '#ffba00', // 线条颜色
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff600',//拐点颜色
                            // borderColor: '#fff600',//拐点边框颜色
                            // borderWidth: 13//拐点边框大小
                            label: {
                                show: true, //开启显示
                                color: '#fff',
                                position: 'top', //在上方显示
                                formatter: function (res) {
                                    if (res.value) {
                                        return res.value
                                    } else {
                                        return 0
                                    }
                                },
                            },
                        },

                    },
                    symbolSize: 8,   //设定实心点的大小
                    areaStyle: {
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: '#ffba0030',
                                    },
                                    {
                                        offset: 0.6,
                                        color: '#ffba0020',
                                    },
                                    {
                                        offset: 1,
                                        color: '#ffba0010',
                                    },
                                ],
                                false
                            ),
                        },
                    },
                    data: dataValue1,
                }
            ]
        }
        myChart.setOption(option);
            
        }
        xhr.onerror = function (e) {
            console.log(e);
        }
    </script>
</body>

</html>